import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';

import { DatePipe } from '@angular/common';
@Component({
    selector: 'app-ultrashort-forecasting-power',
    templateUrl: './ultrashort-forecasting-power.component.html',
    styleUrls: ['./ultrashort-forecasting-power.component.css']
})
export class UltrashortForecastingPowerComponent implements OnInit {
    @Input() seriesDatas: any[][];
    @Input() min: Date;
    @Input() max: Date;
    @Input() interval: string;
    echartsIntance: any;
    options: any;
    series: seriesData[] = [];
    constructor(
        private datePipe: DatePipe,
    ) { }
    ngOnChanges(changes: SimpleChanges): void {
        if (changes['seriesDatas'] && changes['seriesDatas'].currentValue) {
              this.initData();
            
        }
    }
    ngOnInit() {

        this.initData();
    }
    initData() {
        let interval: number,
            xAxisFormatter: any;
        if (this.interval === 'short') {
            interval = 1000 * 60 * 60;
            xAxisFormatter = (value, index) => {
                return this.datePipe.transform(new Date(value), 'HH:mm')
            };
        } else {
            interval = 1000 * 60 * 60 * 6;
            xAxisFormatter = (value, index) => {
                return index * 6;
            };
        }
        this.options = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: 10,
                containLabel: true
            },
            xAxis: {
                type: 'time',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    formatter: xAxisFormatter,
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },

                interval: interval,
                min: this.min,
                max: this.max
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#fff',
                        opacity: 0.4
                    }
                }
            },
            series: [
                {
                    name: '预测功率',
                    smooth: true,
                    symbol: false,
                    type: 'line',
                    data: this.seriesDatas
                }
            ]
        };
        this.updateEchart();
        
    }
    //初始化图表数据
    onChartInit(ec: any) {
        this.echartsIntance = ec;
        this.updateEchart();
    }

    //更新图表数据
    updateEchart() {
        if (this.echartsIntance != null) {
            this.echartsIntance.setOption(this.options);
        }
    }
}
interface seriesData {
    name: string;
    type: string;
    smooth: boolean;
    data: any[];
    symbol?: boolean
}


// WEBPACK FOOTER //
// ./src/app/module/monitor/wind-energy/ultrashort-forecasting-power/ultrashort-forecasting-power.component.ts